<template>
      <div>
            <div  class="profile-form-title">个人信息</div>
            <div class="profile">
              <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="用户头像">
                      <el-row class="profile-icon" style="float: left">
                          <el-col :span="12">
                              <div class="demo-basic--circle">
                                  <div class="block">
                                      <el-avatar :size="50" :src="circleUrl"></el-avatar>
                                  </div>
                                  <div class="block" v-for="size in sizeList" :key="size">
                                      <el-avatar :size="size" :src="circleUrl"></el-avatar>
                                  </div>
                              </div>
                          </el-col>
                      </el-row>
                      <span class="el-icon-arrow-right" style="float: right;line-height: 60px"></span>
                  </el-form-item>

                <el-form-item label="用户昵称">
                    <el-col>
                        <el-input v-model="form.userName" v-bind:disabled="disabled" :class="{isEdit: editable}"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="性别">
                    <el-col v-if="editable">
                        <el-radio v-model="radio" label="男">男</el-radio>
                        <el-radio v-model="radio" label="女">女</el-radio>
                    </el-col>
                    <el-col v-else>{{radio}}</el-col>
                </el-form-item>

                <el-form-item label="小米ID">
                    <el-col><span style="color:#B0B0B0">{{form.userEmail}}</span></el-col>
                </el-form-item>

                <el-form-item label="银行卡">
                    <el-col>
                        <em style="color: #FF6700;font-style: normal">点击查看</em><span class="el-icon-arrow-right"></span>
                    </el-col>
                </el-form-item>

                <el-form-item label="地区">
                    <el-col>中国</el-col>
                </el-form-item>


                <el-col class="profile-edit-box">
                    <button class="profile-edit-button" @click.prevent="editProfile">{{disabled?'编辑':'保存'}}</button>
                </el-col>

              </el-form>
          </div>
      </div>
</template>

<script>
import {getInfo} from '@/api/login'
import {updateNickName} from '@/api/shoppingCart'
export default {
    name: "Profile",
    data(){
      return {
        circleUrl: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-data-mishop/f790b51a76afd7b41522048fa779d69d.jpg',
        sizeList: [],
        radio: '男',
        editable: false,
        disabled: true,
        form: {
            userName: 'Demo',
            userEmail: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
        }
      }
    },
    mounted() {
        this.getLoginInfo();
    },
    methods: {
      getLoginInfo(){
        getInfo().then(response=>{
          this.form.userEmail = response.user.email;
          this.form.userName = response.user.userName;
        })
      },
      editProfile(){
          this.disabled = !this.disabled;
          this.editable = !this.editable;
          if (!this.editable){
            console.log(this.form.userName, this.form.userEmail)
            updateNickName(this.form.userName, this.form.userEmail).then(response =>{
              if (response.code === 200){
                this.$message({
                  text: "恭喜, 昵称修改成功!",
                  type: "success"
                })
              }
            })
          }
      }
    },

}

</script>

<style scoped>

/*表单总体样式*/
.profile{
  width: 500px;
  margin: 20px 0 0 83px;
}

.profile-form-title{
    margin: 20px 0 0 20px;
    font-style: normal;
    font-size: 19px;
    font-weight: 500;
}

el-form{
    margin-left: 50px;
}

.profile-icon{
    float: left;
}

.profile-banner{
    overflow: hidden;
}

.profile-banner img{
    float: left;
    vertical-align:middle;
    width: 40px;
}

.profile-banner em{
    float: left;
    font-size: 24px;
    font-weight: 600;
    font-style: normal;
}

.profile-banner span{
    padding: 10px;
    float: right;
    font-size: 14px;
    color: #333333;
}

.profile-icon{
    width: 60px;
    height: 60px;
}

.profile-edit-button{
    border: 0;
    width: 360px;
    height: 60px;
    color: white;
    margin-bottom: 50px;
    border-radius: 3px;
    font-size: 18px;
    background-color: #FF5C00;
}

/deep/ .el-input__inner {
  border: 0 solid white;
  padding: 0;
}

/deep/ .el-form-item__label{
    font-size: 17px;
    height: 60px;
    line-height: 60px;
    width: 30px;
}

/*输入框样式修改*/
/deep/ .el-input.is-disabled .el-input__inner {
    height: 60px;
}

/deep/ .el-form-item__content {
    line-height: 60px;
    position: relative;
    font-size: 17px;
    left: 50px;
    width: 350px;
}

.profile-edit-box{
    text-align: center;
}

/deep/ .el-radio__label {
    font-size: 17px;
}

/deep/ .el-input.is-disabled .el-input__inner {
  background-color: unset;
  /*border-color: #E4E7ED;*/
  /*color: #C0C4CC;*/
  /*cursor: not-allowed;*/
}

/deep/ .el-input.is-arrow,
.el-input__inner{
  background-color: #4e9a1c;
}

/deep/ .el-input.isEdit .el-input__inner, .isEdit{
    background-color: #fafafa;
    color: #FF6700;
}

</style>
